<!--TODO:待优化-->
<template>
  <div class="occupy"></div>
    <van-tabbar route v-model="active"  active-color="#fe6141" inactive-color="#000">
      <van-tabbar-item replace to="/fistpage">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? fistpage.active : fistpage.inactive" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/classification">
        <span>分类</span>
        <template #icon="props">
          <img :src="props.active ? classification.active : classification.inactive" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/speed">
        <span>速拼</span>
        <template #icon="props">
          <img :src="props.active ? speed.active : speed.inactive" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/cooperation">
        <span>合伙</span>
        <template #icon="props">
          <img :src="props.active ? cooperation.active : cooperation.inactive" alt="">
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/my">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? my.active : my.inactive" alt="">
        </template>
      </van-tabbar-item>
    </van-tabbar>
</template>
<script setup lang="ts">

import {ref} from 'vue'
const active = ref(0)
const fistpage = {
  active : '/src/assets/icon/首页 (1).png',
  inactive:'/src/assets/icon/首页.png'
}
const classification = {
  active : '/src/assets/icon/分类 (1).png',
  inactive:'/src/assets/icon/分类.png'
}
const speed = {
  active : '/src/assets/icon/购物袋 (1).png',
  inactive:'/src/assets/icon/购物袋.png'
}
const cooperation = {
  active : '/src/assets/icon/合伙人 (1).png',
  inactive:'/src/assets/icon/合伙.png'
}
const my = {
  active : '/src/assets/icon/我的-b (1).png',
  inactive:'/src/assets/icon/我的-b.png'
}

</script >

<style scoped lang="scss">
.occupy{
  height: 50px;
}
</style>
